<template>

	<view class="container">
		<view style="
		 background: url('../../static/bg.png');
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
		</view>

		<view class="bg">
			<text>欢迎来到车联网服务平台商家端</text>
			<image src="../../static/bg2.png"></image>
		</view>
		<view class="content-top">
			<view class="submit">
				<fxy-easyinput v-model="phone" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="手机号登录"
					@input="input"></fxy-easyinput>
				<fxy-easyinput v-model="code" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="输入验证码"
					@input="inputYZM"> </fxy-easyinput>
				<button type="primary" @click="getYZM" size="mini"
					style="border-radius: 20px; background-color: #1564E6; margin-top: -60px; margin-right: 10px;">{{ isCounting ? countdown + '秒' : '获取验证码' }}</button>
<view class="zc" @click="navigateToRegister">
					<text style="margin-left: -250px; color: #2979FF;">立即注册
						<uni-icons type="right" size="17" color="#2979FF"></uni-icons></text>
				</view>
			</view>
			<button type="primary" @click="goToIndex('customForm')"
				style="border-radius: 20px; background-color: #1564E6; margin-top: 40px;">登录</button>
		</view>

		<view style="height: 170px; background-color: #fff; margin-top: -10px;">
		</view>
	</view>
</template>


<script>
	// import jwt_decode, {
	// 	jwtDecode
	// } from 'jwt-decode';

	export default {
		// components: {
		// 	jwt_decode
		// },
		data() {
			return {
				username: "",
				code: "",
				phone: "15858587878",
				lastInput: '',
				placeholderStyle: "color:#999;font-size:14px",
				styles: {
					color: '#2979FF',
					border: 'none'
				},
				isCounting: false, // 是否正在倒计时
				countdown: 60 // 倒计时秒数
			}
		},
		mounted() {
			
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		methods: {
			navigateToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			getYZM() {
				if (this.isCounting) return;

				this.isCounting = true;
				this.countdown = 60;

				const interval = setInterval(() => {
					this.countdown -= 1;
					if (this.countdown <= 0) {
						clearInterval(interval);
						this.isCounting = false;
					}
				}, 1000);

				console.log('获取验证码中...');
				uni.request({
					url: 'http://localhost:9207/user/getCode', // 请求的 URL
					method: 'GET', // 请求方法
					data: {
						phone: this.phone
					}, // 请求体，传递的数据
					success: (res) => {
						console.log('请求成功:', res.data);
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},

			goToIndex(ref) {
				uni.request({
					method: 'POST',
					url: 'http://localhost:9200/loginByCode',
					data: {
						username: this.phone,
						code: this.code
					},
					success(options) {
						console.log(options);
						uni.removeStorage({
							key: 'Token',
						})
						uni.setStorage({
							data: options.data.data.access_token,
							key: 'Token',
							success: () => {
								console.log('Token 存储成功');
							},
							fail: (err) => {
								console.log('Token 存储失败', err);
							}
						})
						// 从存储中获取 JWT 令牌
						const token = uni.getStorageSync('Token');
						console.log('token', token)
						const lastp = this.lastInput
						
						uni.request({
							url: `http://localhost:9206/shop/6`, // 请求的 URL
							method: 'GET', // 请求方法
							header: {
								'authorization': 'Bearer ' + token
							},
							success: (response) => {
								console.log('请求成功:', response.data.data);
								const userInfo = response.data.data;
								// 处理响应数据
								uni.removeStorage({
									key: 'UserInfo',
								})
								uni.setStorage({
									data: userInfo,
									key: 'UserInfo',
									success: () => {
										console.log('登录用户 存储成功');
										const userInfo = uni.getStorageSync('UserInfo');
										console.log(userInfo)
									},
									fail: (err) => {
										console.log('登录用户 存储失败', err);
									}
								})

							},
						})


						if (options.data.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: 'none', // 设置图标为无图标
								duration: 1000, // 显示时长（毫秒）
								success: () => {
									console.log('弹窗显示成功');
								},
								fail: (err) => {
									console.error('弹窗显示失败', err);
								}
							});
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})


			},

			// goToIndex() {
			// 	console.log(this.yzm)
			// 	uni.request({
			// 		url: 'http://localhost:9207/user/login/', // 请求的 URL
			// 		method: 'POST', // 请求方法
			// 		data: {
			// 			phone: this.phone,
			// 			code: this.yzm
			// 		}, // 请求体，传递的数据5
			// 		success: (res) => {
			// 			console.log('请求成功:', res.data);
			// 			if (res.data.code === 200) {
			// 				//将生成的token存入缓存
			// 				uni.setStorageSync('token', res.data.token);
			// 				uni.setStorageSync('userInfo', res.data.user);


			// 				console.log('设置全局成功');
			// 				uni.showToast({
			// 					title: '登录成功',
			// 					icon: 'none', // 设置图标为无图标
			// 					duration: 1000, // 显示时长（毫秒）
			// 					success: () => {
			// 						console.log('弹窗显示成功');
			// 					},
			// 					fail: (err) => {
			// 						console.error('弹窗显示失败', err);
			// 					}
			// 				});
			// 				uni.navigateTo({
			// 					url: '/pages/index/index'
			// 				})
			// 			} else {
			// 				uni.showToast({
			// 					title: '手机号或验证码输入错误',
			// 					icon: 'none', // 设置图标为无图标
			// 					duration: 1000, // 显示时长（毫秒）
			// 					success: () => {
			// 						console.log('弹窗显示成功');
			// 					},
			// 					fail: (err) => {
			// 						console.error('弹窗显示失败', err);
			// 					}
			// 				});
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			console.error('请求失败:', err);

			// 		}
			// 	});

			// },
			input(e) {
				this.phone = e; // 更新手机号
				this.lastInput = this.phone;
				console.log('输入内容：', this.phone);
			},
			inputYZM(e) {
				this.code = e;
				console.log('输入内容：', e);
			}

		},
	}
</script>

<style lang="scss">
	.bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 20px;
		margin-top: -170px;
		z-index: 8;
	}

	.bg text {
		margin-bottom: 20px;
		/* 文字和图片之间的间距（可选） */
		color: #fff;
		font-size: 18px;
		z-index: 8;
	}

	.bg image {
		height: 150px;
		width: 150px;
		z-index: 8;
		margin-bottom: 10px;

	}


	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;

	}



	.content-top {
		height: 300px;
		background-color: #fff;
		margin: -100px 0 0; //上，左右，下
		border-radius: 30px;
		padding: 14px 20px;
		z-index: 5;

	}

	.submit {
		margin-top: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 20px;
		z-index: 5;
	}

	.submit-o {
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.submit-t {
		font-size: 14px;
		padding-bottom: 40px;
	}
</style>